<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>京苏易购电子商务</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="../adminlte/plugins/fontawesome-free/css/all.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <!-- DataTables -->
    <link rel="stylesheet" href="../adminlte/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="../adminlte/plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="../adminlte/css/adminlte.min.css">
    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet" href="../adminlte/css/SourceSans.css">
</head>


<body class="hold-transition sidebar-mini">
<div class="wrapper">

    <!-- Main Sidebar Container -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
        <!-- Brand Logo -->
        <a href="#" class="brand-link">
            <img src="../adminlte/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
                 style="opacity: .8">
            <span class="brand-text font-weight-light">帷易胜(JD)商品管理</span>
        </a>

        <!-- Sidebar -->
        <div class="sidebar">
            <div th:replace="shelves/sidebar :: shelves_common_side('../', 'brandcatesetting')"></div>
        </div>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-left">
                            <li class="breadcrumb-item"><a href="#">商品上架管理</a></li>
                            <li class="breadcrumb-item active">类目品牌映射</li>
                        </ol>
                    </div>
                </div>
            </div><!-- /.container-fluid -->
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <!--<div class="card-header">-->

                                <!--<button type="button" class="btn btn-primary" style="margin-right: 20px;"-->
                                        <!--data-toggle="modal" data-target="#modal-default">-->
                                    <!--新 增-->
                                <!--</button>-->

                                <!--<button type="button" class="btn btn-primary" style="margin-right: 20px;"-->
                                        <!--data-toggle="modal" data-target="#modal-default">-->
                                    <!--编 辑-->
                                <!--</button>-->

                                <!--<button type="button" class="btn btn-primary" style="margin-right: 20px;">-->
                                    <!--删 除-->
                                <!--</button>-->

                            <!--</div>-->
                            <!-- /.card-header -->
                            <div class="card-body">


                                <form class="form-horizontal">
                                    <div class="card-body">
                                        <div class="row">

                                            <input type="hidden" name="state"  value="3">

                                            <div class="col-2">
                                                <input type="text" name="name" class="form-control" placeholder="名称">
                                            </div>

                                            <!--<div class="col-2">-->
                                                <!--<input type="text" name="title" class="form-control" placeholder="采集任务">-->
                                            <!--</div>-->

                                            <div class="col-1">
                                                <a href="#"  class="btn btn-primary queryBtn">搜 索</a>
                                            </div>


                                        </div>
                                    </div>
                                </form>


                                <table id="taskTable" class="table table-bordered table-hover">
                                    <thead>
                                    <tr>
                                        <th>序号</th>
                                        <th>上架任务名称</th>
                                        <th>上架任务状态</th>
                                        <th>创建时间</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                </table>
                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>

    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Control sidebar content goes here -->
    </aside>
    <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->

<!-- 文件上传 -->
<div class="modal fade" id="modal-import">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">文件导入</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="import-form">
                    <input type="hidden" name="id"  value="">
                    <div class="card-body">
                        <div class="form-group">
                            <label for="uploadInputFile" id="title-label">文 件</label>
                            <div class="input-group">
                                <div class="custom-file">
                                    <input type="file" class="custom-file-input" id="uploadInputFile">
                                    <label class="custom-file-label" for="uploadInputFile">选择文件</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /.card-body -->
                </form>
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-default" data-dismiss="modal" id="fileUploadCancelBtn">取 消</button>
                <button type="button" class="btn btn-primary" id="fileUploadBtn">提 交</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>


<iframe id="download" name="download" style="display: none" ></iframe>

<!-- jQuery -->
<script src="../adminlte/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="../adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- DataTables -->
<script src="../adminlte/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="../adminlte/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="../adminlte/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="../adminlte/plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
<script src="../adminlte/plugins/moment/moment.min.js"></script>
<!-- bs-custom-file-input -->
<script src="../adminlte/plugins/bs-custom-file-input/bs-custom-file-input.min.js"></script>
<!-- page script -->
<script>

    $(document).ready(function () {

        bsCustomFileInput.init();

        var table = $("#taskTable").DataTable({
            language: {
                url: '../i18n/Chinese.json'
            },

            "paging": true,
            "lengthChange": false,
            "searching": false,
            "ordering": false,
            "info": true,
            "autoWidth": false,
            "responsive": true,

            serverSide: true,
            "ajax": {
                "url": "task/query",
                "data": function (d) {
                    var values = $("form.form-horizontal").serializeArray();

                    var data = {};
                    $.each(values, function (index, item) {
                        data[item.name] = item.value;
                    });

                    return $.extend({}, d, data);
                }
            },

            columns: [
                {
                    data: null,
                    bSortable: false,
                    width: "50px",
                    "orderable": false,
                    render: function (data, type, row, meta) {
                        // 顯示行號
                        var startIndex = meta.settings._iDisplayStart;
                        return startIndex + meta.row + 1;
                    }
                },

                {"data": "name", "width": "200px"},
                {"data": "state", "width": "80px",
                    render: function(data, type, row, meta) {
                        return  {"0": "初始", "1": "等待采集完成", "2": "商品导入中", "3": "品牌类目设置", "4": "商品属性设置", "5": "等待上架", "6": "上架中", "7": "上架完成"}[data] || '<span style="color: red">' + data + '</span>';
                    }
                },
                {
                    "data": "createtime", "width": "100px",
                    render: function (data, type, row, meta) {
                        return moment(data).format("YYYY-MM-DD HH:mm:ss");
                    }
                },

                {
                    "data" : null,
                    "render" : function(data, type,row) {
                        var html = "<button type=\"button\" data-record-id='" + row.id + "' class=\"btn btn-primary btn-flat btn-export \"><i class=\"fa fa-download\"></i>导出</button>";
                        html += "<button type=\"button\" data-record-id='" + row.id + "' data-record-name='" + row.name + "' class=\"btn btn-primary btn-flat btn-import \" style='margin: 0 10px'><i class=\"fa fa-upload\"></i>导入</button>";
                        html += "<button type=\"button\" data-record-id='" + row.id + "' class=\"btn btn-primary btn-flat btn-next \" style='margin: 0 10px'><i class=\"fa fa-check\"></i>映射完成</button>";
                        return html;
                    },
                    "width": "80px"
                }
            ]
        });

        $("a.queryBtn").click(function () {
            table.ajax.reload();
        });

        $('#taskTable tbody').on( 'click', 'tr', function () {
            var checkBox = $(this).find("input[name='checkBox1']");
            if( checkBox.is(':checked') ) {
                checkBox.attr("checked",false);
            } else {
                checkBox.attr("checked",true);
            }
        } );

        $('#taskTable tbody').on( 'click', '.btn-export', function (event) {

            $("#export-form").remove();

            var form = $("<form />").attr("id", "export-form").attr("method", "POST").attr("action", "brandcatesetting/export").attr("target", "download");
            $("<input />").attr("type", "hidden").attr("name", "id").val($(this).data("record-id")).appendTo(form);
            $(form).appendTo($("body"));
            $(form).submit();

            event.stopPropagation();
        } );

        $('#taskTable tbody').on( 'click', '.btn-import', function (event) {

            $("#import-form").find("input[name='id']").val($(this).data("record-id"));

            $('#title-label').html($(this).data("record-name"));

            $('#modal-import').modal('show');

            event.stopPropagation();
        } );



        // 下一步
        $('#taskTable tbody').on( 'click', '.btn-next', function (event) {
            $.ajax({
                type: 'POST',
                url: "brandcatesetting/next",
                cache: false,
                data: {id: $(this).data("record-id")},
                success: function (result) {

                    if ( !!result && result.success ) {
                        alert("设置成功");
                        window.location.reload();
                    } else {
                        alert(result.msg || "设置失败");
                    }
                },
                dataType: "json"
            });

            event.stopPropagation();
        } );



        // 文件提交按钮
        $("#fileUploadBtn").click(function(){

            debugger;

            var formobj =  document.getElementById("import-form");

            var formData = new FormData(formobj);

            formData.append('file', $('#uploadInputFile')[0].files[0]);
            $.ajax({
                url: 'brandcatesetting/upload',
                type: 'POST',
                cache: false,
                data: formData,
                processData: false,
                contentType: false
            }).done(function(result) {
                if ( !!result && result.success ) {
                    alert("导入成功");
                    $("#fileUploadCancelBtn").click();
                }

                if ( !!result && !!result.msg ) {
                    alert(result.msg);
                }

                table.ajax.reload();
            }).fail(function(res) {
                alert(JSON.stringify(res));
            });
        });

    });
</script>
</body>
</html>

